<template>
  <div class="app-container">
    <router-link :to="{ path: levelList[2].path }"><h2>项目背景</h2></router-link>
    <aside v-if="medicalType !== 'edit'">
      <div>{{ form.medical }}</div>
    </aside>
    <aside v-else>
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4}"
        placeholder="请输入内容"
        v-model="form.medical">
      </el-input>
      <a @click="medicalType = ''">保存</a>
    </aside>

    <router-link :to="{ path: levelList[3].path }"><h2>解决问题</h2></router-link>
    <!-- <div class="filter-container">
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCommand('create')">
        新增功能
      </el-button>
    </div> -->
    <el-table
      key="features"
      v-loading="featuresLoading"
      :data="form.features"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="功能名称" align="left">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图标" align="center">
        <template slot-scope="{row}">
          <el-image
            style="width: 48px; height: 48px"
            :src="row.icon"
            fit="contain"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="功能描述" align="center">
        <template slot-scope="{row}">
          <span>{{ row.desc }}</span>
        </template>
      </el-table-column>
    </el-table>

    <router-link :to="{ path: levelList[4].path }"><h2>方案优势</h2></router-link>
    <el-table
      key="advantage"
      v-loading="advantageLoading"
      :data="form.advantage"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="名称" align="left">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图标" align="center">
        <template slot-scope="{row}">
          <el-image
            style="width: 48px; height: 48px"
            :src="row.icon"
            fit="contain"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="描述" align="center">
        <template slot-scope="{row}">
          <span>{{ row.desc }}</span>
        </template>
      </el-table-column>
    </el-table>

    <router-link :to="{ path: levelList[5].path }"><h2>核心产品</h2></router-link>
    <el-table
      key="product"
      v-loading="productLoading"
      :data="form.product"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="名称" align="left">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图标" align="center">
        <template slot-scope="{row}">
          <el-image
            style="width: 48px; height: 48px"
            :src="row.icon"
            fit="contain"
          ></el-image>
        </template>
      </el-table-column>
    </el-table>

    <router-link :to="{ path: levelList[6].path }"><h2>合作伙伴</h2></router-link>
    <el-table
      key="partner"
      v-loading="partnerLoading"
      :data="form.partner"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="名称" align="left">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图标" align="center">
        <template slot-scope="{row}">
          <el-image
            style="width: 48px; height: 48px"
            :src="row.icon"
            fit="contain"
          ></el-image>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
import * as homeHttp from '@/api/home';
import { EventBus } from '@/utils/event-bus';

export default {
  name: 'solution-edit',
  data() {
    return {
      medicalType: '',
      featuresLoading: false,
      advantageLoading: false,
      productLoading: false,
      partnerLoading: false,
      form: {
        medical: '',
        features: [],
        advantage: [],
        product: [],
      },
      id: '',
      levelList: []
    }
  },
  created() {
    let { id } = this.$route.params;

    if (id) {
      this.id = id;
      this.getData();
    } else {
      this.id = id = -1
    }

    const levelList = [
      // { title: '解决方案', path: '/solutions' },
      // { title: '方案详情', path: id ? '/solutions/edit/' + id : '/solutions/create', redirect: 'noRedirect' },
      { title: '项目背景', path: id ? `/solutions/medical/${id}` : '/solutions/medical' },
      { title: '解决问题', path: id ? `/solutions/feature/${id}` : '/solutions/feature' },
      { title: '方案优势', path: id ? `/solutions/advantage/${id}` : '/solutions/advantage' },
      { title: '核心产品', path: id ? `/solutions/product/${id}` : '/solutions/product' },
      { title: '合作伙伴', path: id ? `/solutions/partner/${id}` : '/solutions/partner' },
    ];
    this.levelList = levelList;
    EventBus.$emit('custom-breadcrumb', levelList);
  },

  methods: {
    async getData() {
      const res = await homeHttp.getSolutionById({ id: this.id });

      this.form = res.data && res.data.Data || {};
    },
    handleCommand(command, row) {
      switch (command) {
        case 'delete':
          this.$confirm('确定要删除这条数据吗？', {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            this.handleDelete();
          });
          break;

        case 'edit':
          this.$router.push(`/solutions/feature/edit/${row.Id}`);
          break;

        case 'create':
          this.$router.push(`/solutions/feature/edit`);
          break;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
h2 {
  color: #333333;
  font-size: 32px;
}
</style>
